<template>
    <div class="join">
        <ActivityList v-for="(item,index) in joinActivityList" :key="index" v-if="item.activity_info" :dataList="item.activity_info" :callback="navigateToDetail"/>
    </div>
</template>

<script>
import ActivityList from "../../components/activityList.vue"
import { getJoinActivityList } from '../../api/index.js'
export default {
  data() {
    return {
      joinActivityList: [], //获取已经参加的活动数据
      limit: 4,
      page: 0,
      reachBottomFlag: true, // 没有数据了不再发送请求
    };
  },
  components: {
    ActivityList,
  },
  onShow(){
    this.page= 0;
    this.reachBottomFlag = true;
    this.reqActivityList(); //获取已经参加的活动数据
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.reachBottomFlag = true;
    this.reqActivityList();
  },
  //上拉加载
  onReachBottom () {
    if(this.reachBottomFlag){
      this.page++;
      this.reqActivityList();
    }
  },
  methods: {
    //获取已经参加的活动数据
    async reqActivityList(){
      let user_token = wx.getStorageSync('userToken');
      let params = {
        user_token : user_token,
        limit: this.limit,
        page: this.page
      };
      let res = await getJoinActivityList(params);
      if(res.data.level == "success"){
        let data = res.data.data;
        wx.stopPullDownRefresh()
        if(data.length > 0){
          if(this.page == 0){ 
            this.joinActivityList = data;
          }else{
            this.joinActivityList = this.joinActivityLis.concat(data);
          }
        }else{
          if(this.joinActivityList.length > 0){ // 判断数据，是没有活动数据，还是分页功能
            this.reachBottomFlag = false;
          }else{
            wx.showToast({
              title: '暂无参加活动',
              icon: 'none',
              duration: 3000
            })
          }
        }
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到对应活动详情
    navigateToDetail(activityInfo){
      wx.navigateTo({
        url: '/pages/detail/main?id='+activityInfo.id
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .join
    width 100%
    height 100vh
    background-color #f1f1f1
</style>